<template>
  <div class="legend-cont">
    <div class="legend-item" v-for="(item, index) in list" :key="index">
      <span class="leg-l leg-com" :style="item.style1"></span>
      <span class="leg-r leg-com" :style="item.style2"></span>
      <span class="leg-label">{{ item.label }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';

  const list = ref([
    {
      label: '开始',
      style1: 'background:#72e2a6',
      style2: 'background: linear-gradient(to right, #9beac0, #e2f6eb);',
    },
    {
      label: '未开始',
      style1: 'background:#AAAAAA',
      style2: 'background: linear-gradient(to right, #C3C3C3, #EBEBEB);',
    },
    {
      label: '当前审批',
      style1: 'background:#B770FF',
      style2: 'background: linear-gradient(to right, #CC98FE,#EFE2FD);',
    },
    {
      label: '已处理',
      style1: 'background:#6D9FFF',
      style2: 'background: linear-gradient(to right, #96B9FE, #E2ECFD);',
    },
    {
      label: '拒绝',
      style1: 'background:#F78080',
      style2: 'background: linear-gradient(to right, #F8A5A5, #FBE6E6);',
    },
    {
      label: '结束',
      style1: 'background:#F4CD09',
      style2: 'background: linear-gradient(to right, #F6DC54, #FAF3CA);',
    },
  ]);
</script>

<style lang="less" scoped>
  .legend-cont {
    display: flex;
    align-items: center;

    .legend-item {
      margin-right: 32px;
      display: flex;
      align-items: center;
      position: relative;

      &:last-child {
        margin-right: 0;
      }

      .leg-com {
        position: absolute;
        border-radius: 50%;
        width: 15px;
        height: 15px;
      }

      .leg-l {
        left: 0;
        // background: #72e2a6;
      }

      .leg-r {
        left: 3px;
        // background: linear-gradient(to right, #9beac0, #e2f6eb);
        z-index: 2;
      }

      .leg-label {
        margin-left: 20px;
        font-size: 14px;
      }
    }
  }
</style>
